<template>
  <div id="contact1">
    <div class="welcome">
      <span>欢迎品尝！</span>
      <a @click="goMenu">let's go~~</a>
    </div>
    <header>联系我们</header>
    <main>contact we</main>
    <footer>234234232@163.com</footer>
  </div>
</template>
<script>
export default {
  methods: {
    goMenu() {
      console.log(1111);

      this.$router.replace("/about");
    }
  }
};
</script>
<style lang="less" scope>
#contact1 {
  position: absolute;
  top: 864px;
  left: 890px;
}
.welcome {
  position: absolute;
  top: -452px;
  left: -544px;
  width: 600px;
  height: 300px;
  background-color: #ccc;
  box-shadow: 2px 2px 20px #fff;
  border-radius: 8px;
  text-align: center;
  line-height: 300px;
  opacity: 0.7;
  span {
    font-size: 20px;
  }
  a {
    display: inline-block;
  }
}
header,
main,
footer {
  margin: 0px 30px;
  width: 300px;
  height: 50px;
  background-color: pink;
  text-align: center;
  line-height: 50px;
  color: #ffff;
  font-size: 20px;
}
header {
  border-bottom: 5px solid yellow;
  background-color: #ccc;
}
</style>
